<template>
  <div class="bg">
    <!-- 时间搜索框 -->
    <searchTime
      @searchvalue="userSearch"
      @searchreset="reset"
      :selectMsg="selectMsg"
      :titMsg="titMsg"
      :options="options"
      :selectBoolen="true"
      :selectTime="true"
    />

    <!-- 表格展示 -->
    <el-card class="card">
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="userName" label="举报用户" align="center"></el-table-column>
        <el-table-column prop="petName" label="举报宠物" align="center"></el-table-column>
        <el-table-column label="举报类型" align="center">
          <template slot-scope="scope">
            <span>{{reportStatus(scope.row.reportType)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reportContent" label="举报理由" align="center"></el-table-column>
        <el-table-column prop="postContent" label="举报内容" align="center"></el-table-column>
        <el-table-column prop="beReportUserName" label="举报对象" align="center"></el-table-column>
        <el-table-column prop="beReportPhone" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="reportTime" label="举报时间" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.reportStatus==1?'待处理':'已屏蔽'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="lookreport(scope.row)" type="primary" size="small">查看</el-button>
            <el-button @click="delet(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:20px"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="10"
          background
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog title="举报详情" :visible.sync="dialogVisible" width="30%" >
      <dynamic
        :userMessage="userMessage"
        :comment="comment"
        :commentTotal="commentTotal"
        @currentpage="currentpage"
        @commentshield="commentshield"
      />
    </el-dialog>
  </div>
</template>

<script>
import searchTime from "@/components/searchTime";
import dynamic from "@/components/dynamic";
export default {
  components: {
    searchTime,
    dynamic
  },
  data() {
    return {
      titMsg: "用户昵称/电话号码", //输入框提示信息
      selectMsg: "状态", //输入框提示信息
      dialogVisible: false, //弹窗
      options: [
        {
          value: 1,
          label: "待处理"
        },
        {
          value: 2,
          label: "已屏蔽"
        }
      ],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [], //表格数据
      userMessage: {}, //用户信息
      comment: [], //评论列表
      commentTotal: 20, //评论列表
      commentID: 0, //评论列表详情
      commentPage: 1, //评论分页
      total: 0, //总条数
      current: 1, //页数
      // 模糊查询
      status: "", //状态查询
      selectCode: "", //模糊查询
      startDate: "", //开始时间
      endDate: "", //结束时间
      postId: 0 //用户ID
    };
  },
  mounted() {
    this.report();
    // 加载评论列表
    this.commentlist();
  },
  methods: {
    // 举报管理列表
    report() {
      let param = {
        size: 10,
        current: this.current,
        status: this.status, //状态查询
        selectCode: this.selectCode, //模糊查询
        startDate: this.startDate, //开始时间
        endDate: this.endDate //结束时间
      };
      this.$http.article.reportlist(param).then(res => {
        this.tableData = res.result.records;
        this.total = res.result.total;
        console.log("获取举报列表", res);
        //显示每页展示的数量
        res.result.records.forEach((item, index) => {
          //res.data.data.list 表格数据     forEach为每一项添加数据
          item.index = index + 1 + (this.current - 1) * 10;
          // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小

          return item;
        });
      });
    },

    // 获取详情
    lookreport(val) {
      console.log('获取举报详情val',val)
      this.dialogVisible = true; //弹窗
      // this.userMessage =val;
      this.commentID = val.reportId;
      this.postId = val.postId;
      this.$http.article.reportget({ petPostReportId: val.reportId }).then(res => {
        console.log("获取举报详情信息", res);
        this.userMessage = res.result;
      });
      console.log("获取详情", val);
      this.commentlist()
    },

    // 获取评论列表
    commentlist() {
    //   console.log(this.postId, "获取评论用户ID");
    //   let param = {
    //     size: 10,
    //     current: this.commentPage,
    //     postId:this.postId
    //     // postId: 19
    //   };
    //   console.log('获取评论参数',param)
    //   this.$http.article.reportgetlist(param).then(res => {
    //     this.comment = res.result.records;
    //     this.commentTotal = res.result.total;
    //     console.log("获取评论列表", res);
    //   });
    },
    // 评论修改
    commentshield(val) {
      console.log("评论信息", val);
      let statusMessage = "";
      if (val.reportStatus == 1) {
        statusMessage = "确定屏蔽";
      } else {
        statusMessage = "确定解除屏蔽";
      }
      this.$confirm(`此操作将${statusMessage}该文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let Status = 0;
          if (val.reportStatus == 1) {
            Status = 2;
          } else {
            Status = 1;
          }
          let param = {
            reportId: val.reportId,
            reportStatus: Status
          };
          this.$http.article.reportgetupadte(param).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg
              });
               this.report();
               this.dialogVisible = false; //弹窗
            }
            console.log("修改状态举报管理", res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 评论列表分页
    currentpage(val) {
      this.commentPage = val;
      this.commentlist();
      console.log("评论分页", val);
    },
    // 删除留言
    delet(val) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.article
            .reportdelet({ petPostReportId: val.reportId })
            .then(res => {
              if (res.code == 200) {
                /*--------删除成功之后获取上一页的数据,避免是否为空--------*/

                //此时已经实现删除操作，所以total的值需要减size，Math.ceil是向上取整，保证始终大于等于0
                const totalPage = Math.ceil((this.total - 1) / 10);

                console.log("totalPage", totalPage);

                //将当前页码与删除数据之后的总页数进行比较，避免当前页码不存在
                const pagenum =
                  this.current > totalPage ? totalPage : this.current;

                console.log("获取总条数", pagenum);

                //避免pagenum变为0
                this.current = pagenum < 1 ? 1 : pagenum;

                this.$message.success("删除成功!");
                this.report();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 返回状态
    reportStatus(val) {
      switch (val) {
        case 1:
          return "广告";
          break;
        case 2:
          return "内容低俗";
          break;
        case 3:
          return "辱骂、歧视、挑衅（不友善）";
          break;
        case 4:
          return "政治敏感";
          break;
        case 5:
          return "其它";
          break;
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val;
      this.report();
    },
    // 搜索框
    userSearch(val) {
      this.current=1;
      this.selectCode = val.search;
      this.startDate = val.firstTime;
      this.endDate = val.endTime;
      this.status = val.value;
      this.report();
      console.log("搜索框", val);
    },
    // 重置
    reset(val) {
      this.selectCode = "";
      this.startDate = "";
      this.endDate = "";
      this.status = "";
      if (val == "reseta") this.report();
      console.log(val);
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>